<!DOCTYPE html>
<html>
<head>
    <!-- 基础设置 -->
    <meta charset="utf-8">
    <title>自己实现的天气预报02-html部分+css部分</title>
    
    <!-- 样式表引入 -->
    <style type="text/css">
        /************** 1、清除所有元素的默认外边距和默认内边距 ************/
		*{
			margin: 0;/* 外边距为0 */
			padding: 0;/* 内边距为0 */
			font-family: Arial;/* 设置默认字体 */
		}
		/*******************************end*****************************/
		/****************2、设置整个天气应用的背景和基本布局 ***************/
		#box{
			background-color: #1974d4; /* 蓝色背景 */
			/* border: red solid 1px; */
			width: 100%; /* 宽度100% */
			max-width: 1200px; /* 最大宽度限制屏幕小于1200则充满，屏幕大于1200则为1200 */
			margin: 20px auto; /* 上下边距20px，左右居中 */
			padding: 15px; /* 内边距 */
			border-radius: 5px;
		}
		/*******************************end*****************************/
		
		/**************************** 3、顶部导航栏 *********************/
		.top-daoHan{
			display: flex; /* 使用flex布局 */
			justify-content: space-between; /* 内容两端对齐 */
			align-items: center; /* 垂直居中 */
			padding: 10px 0; /* 上下内边距 */
			margin-bottom: 15px; /* 下边距 */
			border-bottom: 1px solid #b0c4de; /* 底部边框 */
		}
		/* 3.1 城市显示区域*/
		.city-display {
		    font-size: 30px; /* 字体大小 */
		    font-weight: bold; /* 字体加粗 */
		    color: white; /* 字体颜色 */
		}
		/* 3.2 城市切换按钮*/
		#city-btn {
		    font-size: 14px; /* 字体大小 */
		    color: blue; /* 字体颜色 */
		    cursor: pointer; /* 鼠标指针样式 */
		    margin-left: 10px; /* 左外边距 */
		    padding: 2px 8px; /* 内边距 */
		    background-color: #e4e4e4; /* 背景色 */ 
		}
		/* 3.3 城市内容输入框(默认是隐藏的) */
		.input-area {
		    display: none; /* 默认隐藏 */
		    margin-top: 10px; /* 上边距 */
			position: absolute; /* 绝对定位，不影响其他元素 */
			top: 60px;
			left: 490px;;
		}
		.city-input {
		    padding: 6px; /* 内边距 */
		    border: 1px solid #93c5fd; /* 边框 */
			border-radius: 25px;
		    width: 150px; /* 宽度 */
		}
		/* 3.4 确认框 */
		.queren-btn {
		    padding: 6px 12px; /* 内边距 */
		    background-color: #3b82f6; /* 背景色 */
		    color: white; /* 字体颜色 */
		    border: none; /* 无边框 */
			border-radius: 10px;
		    cursor: pointer; /* 鼠标指针样式 */
		}
		/* 3.5 日期信息 */
		.now-day, .now-week {
		    font-size: 20px; /* 字体大小 */
		    color: white; /* 字体颜色 */
		}
		/* 3.6 天气预报字样 */
		.tianqiyubao{
			font-size: 48px; 
			font-weight: bold; 
			color: white;
			text-shadow: 2px 2px 8px rgba(0,0,0,0.3); /* 阴影*/
			margin: 0 20px;
		}
		/*******************************end*****************************/
		
		/********************* 4、主体内容 ******************************/
		.main-content{
			/* border: green solid 1px; */
			margin-bottom: 20px; /* 下边距 */
		}
		/* 4.1上侧：当前天气+空气质量*/
		.current-tianqi{
			/* border: saddlebrown solid 1px; */
			display: flex;/* 弹性布局 */
			margin-bottom: 20px; /* 下边距 */
		}
		/*------------- 4.1.1 左侧当前天起基本信息显示区域 -----------------*/
		.jibenxingxi{
			flex: 3; /* 占3份空间 */
			background-color: white; /* 背景色 */
			padding: 20px; /* 内边距 */
			margin-right: 15px; /* 右外边距 */
			border-radius: 15px;/* 圆角 */
		}
		/* 温度 */
		.wendu {
		    display: flex; /* flex布局 */
		    align-items: flex-start; /* 顶部对齐 */
		    margin-bottom: 15px; /* 下边距 */
		}
		/* 当前温度 */
		.current-wendu {
		    font-size: 56px; /* 字体大小 */
		    font-weight: bold; /* 字体加粗 */
		    color: #1e40af; /* 字体颜色 */
		}
		/* 温度符号 */
		.fuhao {
		    font-size: 24px; /* 字体大小 */
		    margin-top: 8px; /* 上边距 */
		    color: #1e40af; /* 字体颜色 */
		}
		/* 天气图标 */
		.tianqi-icon {
		    display: flex; /* flex布局 */
		    align-items: center; /* 垂直居中 */
		    margin-bottom: 15px; /* 下边距 */
		}
		/* 晴的图标 */
		.qing-icon {
		    width: 50px; /* 宽度 */
		    height: 50px; /* 高度 */
		    margin-right: 10px; /* 右外边距 */
		}
		/* 天气类型 */
		.tianqi-type {
		    font-size: 24px; /* 字体大小 */
		    color: #1e3a8a; /* 字体颜色 */
		}
		/* 信息列表 */
		.xingxi-list {
		    list-style: none; /* 无列表标记 */
			font-size: 24px;
		}
		
		.xingxi-list li {
		    margin-bottom: 8px; /* 下边距 */
		    color: #1f2937; /* 字体颜色 */
		}
		/*-----------------------------end-----------------------------*/
		
		/*-------------------- 4.1.2 右侧显示空气质量 -------------------*/
		.kongqizhilain{
			flex: 2; /* 占2份空间 */
			background-color: white; /* 背景色 */
			padding: 20px; /* 内边距 */
			border-radius: 15px;/* 圆角 */
		}
		/* 质量显示 */
		.aqi-box {
		    display: flex; /* flex布局 */
		    align-items: center; /* 垂直居中 */
		    margin-bottom: 10px; /* 下边距 */
		}
		/* 数字 */
		.api-number {
		    font-size: 56px; /* 字体大小 */
		    font-weight: bold; /* 字体加粗 */
		    color: #10b981; /* 字体颜色 */
		    margin-right: 10px; /* 右外边距 */
		}
		/* 等级 */
		.api-level {
		    font-size: 18px; /* 字体大小 */
		    color: #10b981; /* 字体颜色 */
		}
		/* 评价描述 */
		.aqi-text {
		    font-size: 24px; /* 字体大小 */
		    color: #1f2937; /* 字体颜色 */
		    margin-bottom: 15px; /* 下边距 */
		}
		/* 参数指数 */
		.aqi-zhishu {
		    list-style: none; /* 无列表标记 */
		}
		
		.aqi-zhishu li {
		    margin-bottom: 6px; /* 下边距 */
		    font-size: 24px; /* 字体大小 */
		    color: #1f2937; /* 字体颜色 */
		}
		
		/*--------------------------------end------------------------------*/		
		
		/*----------------------- 4.2下侧显示未来七天的预报情况------------- */
		.weilai-qiri-tianqi{
			background-color: white; /* 背景色 */
			padding: 15px; /* 内边距 */
			border-radius: 15px;/* 圆角 */
		}
		/* 结构盒子 */
		.day-style-box {
		    display: flex; /* flex布局 */
		    justify-content: space-between; /* 两端对齐 */
		    list-style: none; /* 无列表标记 */
		}
		/* 列表 */
		.forecast-item {
		    flex: 1; /* 等宽分布 */
		    text-align: center; /* 文本居中 */
		    padding: 10px 5px; /* 内边距 */
		}
		/* 日期和天数 */
		.forecast-date, .forecast-week {
		    font-size: 24px; /* 字体大小 */
		    color: #1f2937; /* 字体颜色 */
		    margin-bottom: 5px; /* 下边距 */
		}
		/* 图标 */
		.forecast-icon {
		    width: 60px; /* 宽度 */
		    height: 60px; /* 高度 */
		    margin: 8px 0; /* 上下外边距 */
		}
		/* 温度 */
		.temp-range {
		    display: flex; /* flex布局 */
		    justify-content: center; /* 水平居中 */
		    margin: 8px 0; /* 上下外边距 */
		    font-size: 20px;
		}
		/* 最高温度 */
		.high-temp {
		    font-weight: bold; /* 字体加粗 */
		    color: #ef4444; /* 字体颜色 */
		    margin-right: 5px; /* 右外边距 */
		}
		/* 最低温度 */
		.low-temp {
		    color: #3b82f6; /* 字体颜色 */
		}
		/* 风型和风向 */
		.weather-type, .wind-direction {
		    font-size: 20px; /* 字体大小 */
		    color: #4b5563; /* 字体颜色 */
		}
		/*-----------------------------end------------------------------*/
		/******************************end******************************/
		
		/************************* 5、图表区域 **************************/
		.tubiao {
		    background-color: white; /* 背景色 */
		    padding: 20px; /* 内边距 */
		    border-radius: 15px;/* 圆角 */
		}
		
		#title {
		    text-align: center; /* 文本居中 */
		    font-size: 18px; /* 字体大小 */
		    font-weight: bold; /* 字体加粗 */
		    color: #1e3a8a; /* 字体颜色 */
		    margin-bottom: 15px; /* 下边距 */
		}
		
		#wendu-tubiao {
		    height: 200px; /* 高度 */
		    background-color: #f9fafb; /* 背景色 */
		    display: flex; /* flex布局 */
		    justify-content: center; /* 水平居中 */
		    align-items: center; /* 垂直居中 */
		    color: #6b7280; /* 字体颜色 */
		}
		/*******************************end*****************************/
    </style>
</head>
<body>
	<!-- 大背景容器 -->
	<div id="box">
			<!-- 顶部导航栏 -->
			<div class="top-daoHan">
				<!-- 城市显示区域 -->
				<div class="city-display">
					<!-- 当前默认城市：北京 -->
					北京
					<!-- 城市切换按钮 -->      
					<span id="city-btn">[切换]</span>
				</div>
				<!-- 城市内容输入框(默认是隐藏的) -->
				<span class="input-area">
					<!-- 城市输入框 -->
					<input type="text" class="city-input"/>
					<!-- 确认按钮 -->
					<button class="queren-btn">确认</button>
				</span>
				<!-- 天气预报字样 -->
				<div class="tianqiyubao">天气预报</div>
				<div >
					<!-- 日期信息 -->
					<div class="now-day">4-20</div>
					<div class="now-week">周三</div>
				</div>
			</div>
			
			<!-- 主体内容 -->
			<div class="main-content">
				<!-- 上侧显示：当前天气+空气质量 -->
				<div class="current-tianqi">
					<!-- 左侧当前天起基本信息显示区域 -->
					<div class="jibenxingxi">
						<!-- 温度主显示区域 -->
						<div class="wendu">
							<!-- 温度 -->
							<span class="current-wendu">25</span>
							<!-- 符号 -->
							<span class="fuhao">°</span>
						</div>
						<!-- 天气图标+类型 -->
						<div class="tianqi-icon">
							<!-- 图标 -->
							<img src="./image/qing.png" class="qing-icon" alt="天气图标">
							<!-- 类型 -->
							<span class="tianqi-type">晴</span>
						</div>
						<!-- 详细信息列表 -->
						<ul class="xingxi-list">
							<li>体感温度：<span class="tigan-wendu">24°</span></li>
							<li>湿度：<span class="tigan-shidu">45%</span></li>
							<li>风速：<span class="tigan-fengsu">3级</span></li>
						</ul>
					</div>
					<!-- 右侧显示空气质量 -->
					<div class="kongqizhilain">
						<!-- 质量显示 -->
						<div class="aqi-box">
							<div class="api-number">48</div>
							<div class="api-level">优</div>
						</div>
						<!-- 评价描述 -->
						<div class="aqi-text">
							空气质量令人满意，基本无空气污染
						</div>
						<!-- 指数参数 -->
						<div class="aqi-zhishu">
							<li>PM2.5：<span id="" class="pm2.5">22</span></li>
							<li>PM10：<span id="" class="pm10">35</span></li>
							<li>NO2：<span id="" class="no2">8</span></li>
						</div>
					</div>
				</div>
				<!-- 下侧显示未来七天的预报情况 -->
				<div class="weilai-qiri-tianqi">
					<!-- 七天的结构大盒子 -->
					<ul class="day-style-box">
					    <!-- 每一天的预报项结构 -->
					    <li class="forecast-item">
							<!-- 日期 -->
					        <div class="forecast-date">04-25</div>
					        <div class="forecast-week">周一</div>
							<!-- 天气图标 -->
					        <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
					        <div class="temp-range">
					            <span class="high-temp">18°</span>
					            <span class="low-temp">5°</span>
					        </div>
							<!-- 情况 -->
					        <div class="weather-type">晴</div>
					        <div class="wind-direction">东风</div>
					    </li>
					    <!-- 重复6个相同结构的li（共7天） -->
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-26</div>
						    <div class="forecast-week">周二</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-27</div>
						    <div class="forecast-week">周三</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-28</div>
						    <div class="forecast-week">周四</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-29</div>
						    <div class="forecast-week">周五</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">04-30</div>
						    <div class="forecast-week">周六</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
						
						<!-- 每一天的预报项结构 -->
						<li class="forecast-item">
							<!-- 日期 -->
						    <div class="forecast-date">05-01</div>
						    <div class="forecast-week">周天</div>
							<!-- 天气图标 -->
						    <img src="./image/qing.png" class="forecast-icon" alt="天气图标">
							<!-- 温度 -->
						    <div class="temp-range">
						        <span class="high-temp">18°</span>
						        <span class="low-temp">5°</span>
						    </div>
							<!-- 情况 -->
						    <div class="weather-type">晴</div>
						    <div class="wind-direction">东风</div>
						</li>
					  </ul>
				</div>
			</div>
			<!-- 图表区域 -->
			<div class="tubiao">
				<div id="title">未来七天温度趋势</div>
				<div id="wendu-tubiao">
					<!-- 由js动态生成 -->
				
					<!-- canvas是HTML5中专门用来绘制图形的画布标签。 -->
					<canvas id="tempChart"></canvas> 
				</div>
			</div>
	</div>
    <!-- JavaScript库引入 -->
    <script src="jquery-3.4.1.min.js"></script>
    <!-- 自定义脚本 -->
    <script>
        /* 后续JS内容将在此处详细注释 */
    </script>
</body>
</html>